<template>
    <div style="min-width: 809px">
        <div v-if="$route.path == '/order'">
            <div class="vs-search-box">
                <el-form v-search-box-enter ref="form" :inline="true" :model="paging" label-width="120px">
                    <el-form-item label="姓名：">
                        <el-input style="width: 200px" v-model="paging.realname" placeholder="请输入姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号：">
                        <el-input style="width: 200px" v-model="paging.phone" placeholder="请输入手机号"></el-input>
                    </el-form-item>
                    <el-form-item label="订单编号：">
                        <el-input style="width: 200px" v-model="paging.out_trade_no" placeholder="请输入订单编号"></el-input>
                    </el-form-item>
                    <el-form-item label="订单状态：">
                        <el-select style="width: 200px" clearable v-model="paging.status" placeholder="请选择">
                            <el-option label="待发货" value="1"> </el-option>
                            <el-option label="待收货" value="2"> </el-option>
                            <el-option label="待领取" value="3"> </el-option>
                            <el-option label="已完成" value="4"> </el-option>
                            <el-option label="已取消" value="5"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="订单时间：">
                        <!-- <el-date-picker v-model="paging.create_time" type="datetimerange" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" start-placeholder="开始时间" end-placeholder="结束时间" style="width:300px">
                    </el-date-picker> -->
                        <el-date-picker v-model="paging.create_time" type="daterange" style="width: 300px"
                            value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期"> </el-date-picker>
                    </el-form-item>
                    <el-form-item label="" class="vs-right-btns">
                        <el-button @click="handleCurrentChange(1, true)" type="primary">查询</el-button>
                        <el-button @click="reset(1)">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="vs-table-box">
                <div class="operation-box clear-float">
                    <el-button v-if="utils.getIsShopowner()" @click="exportFile" :loading="isExport"
                        icon="el-icon-download" type="primary">导出</el-button>
                </div>
                <el-table v-loading="loading" :data="tableData" ref="table" row-key="id"
                    header-row-class-name="has-gutter-table" style="width: 100%">
                    <el-table-column reserve-selection width="55px" type="selection"></el-table-column>
                    <el-table-column width="70px" label="序号" type="index" align="center"></el-table-column>
                    <el-table-column prop="out_trade_no" label="订单编号" min-width="130" align="center"> </el-table-column>
                    <el-table-column prop="ordersIntegralGoods.0.goodsIntegral.images" label="商品图片" align="center">
                        <template v-if="scope.row.ordersIntegralGoods" slot-scope="scope">
                            <el-image v-if="scope.row.ordersIntegralGoods.length" fit="contain" style="height: 60px"
                                :src="scope.row.images[0]" :preview-src-list="scope.row.images"> </el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="ordersIntegralGoods.0.goodsIntegral.title" label="商品系列" min-width="140"
                        show-overflow-tooltip align="center"> </el-table-column>
                    <el-table-column prop="number" label="数量" align="center"> </el-table-column>
                    <el-table-column prop="user.realname" label="姓名" align="center"> </el-table-column>
                    <el-table-column prop="user.phone" label="手机号" width="110" align="center"> </el-table-column>
                    <el-table-column prop="create_time" label="订单时间" width="160" align="center"> </el-table-column>
                    <el-table-column prop="status_text" label="订单状态" align="center"> </el-table-column>
                    <el-table-column fixed="right" width="109" label="操作" align="center">
                        <template slot-scope="scope">
                            <span @click="setRow(1, scope.row)" class="tab-table-text">详情</span>
                            <!-- <span @click="setRow(1,scope.row)" class="tab-table-text">编辑</span> -->
                            <!-- <span @click="setRow(2,scope.row)" class="tab-red-text">删除</span> -->
                        </template>
                    </el-table-column>
                </el-table>
                <div class="vs-paging-box">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page.sync="paging.page" :page-size="paging.limit"
                        layout="total, sizes, prev, pager, next, jumper" :total="paging.total"
                        :page-sizes="[100, 200, 500, 1000]"> </el-pagination>
                </div>
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    filters: {
        rtPhone(val) {
            if (val && val.length == 11) {
                let val2 = val.toString();
                let num1 = val2.substring(0, 3);
                let num2 = val2.substring(7, 11);
                return `${num1}****${num2}`;
            }

            return val;
        },
    },
    data() {
        return {
            recordList: [],
            loading: false,
            loading2: false,
            isBtn: false,
            isInfo: false,
            isExport: false,
            dialogVisible: false,
            paging: {
                realname: '', //姓名
                phone: '', //手机号
                out_trade_no: '', //订单编号
                create_time: '', //开始时间
                end_time: '', //结束时间
                status: '', //订单状态1: 待发货 2: 待领取 3: 已完成
                is_all: 0,
                page: 1,
                total: 0,
                limit: 100,
            },
            form: {
                date: '',
            },
            tableData: [],
        };
    },
    created() {
        if (this.$route.path == '/order') {
            this.handleCurrentChange(1);
        }
    },
    methods: {
        async exportFile() {
            let obj = Object.assign({}, this.paging);
            let ids = this.$refs.table.selection;
            if (!ids || ids.length == 0) return this.$message.error('请选择要导出的积分商品订单!');
            obj.ids = ids.map((v) => v.id).join(',');
            this.isExport = true;
            let res = await this.$Http.goodsIntegralExportOrders(obj);
            this.utils.downloadXlsx(res, '积分商品订单列表');
            this.isExport = false;
        },
        async getCate() {
            let { code, data } = await this.$Http.getCate({
                limit: 10000,
            });
            if (code) {
                this.classList = data.data;
            }
            // console.log(this.classList);
        },
        async setRow(type, row) {
            if (type == 1) {
                this.utils.goUrl('/orderInfos?id=' + row.id);
            } else if (type == 2) {
                // this.isInfo = true;
                // this.loading2 = true;
                // let { code, data } = await this.$Http.catdistribution({
                //     id: row.id
                // })
                // this.loading2 = false;
                // if (code) {
                //     this.recordList = data;
                // } else this.recordList = [];
            }
        },
        handleClose(dom) {
            this.$refs['ruleForm'].resetFields();
            this.dialogVisible = false;
            dom && dom();
        },
        async repairGetList() {
            let obj = Object.assign({}, this.paging);
            if (obj.create_time && obj.create_time.length) {
                obj.end_time = obj.create_time[1];
                obj.create_time = obj.create_time[0];
            } else {
                obj.create_time = '';
                obj.end_time = '';
            }
            this.loading = true;
            let { code, data } = await this.$Http.goodsIntegralGetOrders(obj);
            this.loading = false;
            if (code) {
                data.data.forEach((ele) => {
                    ele.images = ele.ordersIntegralGoods[0].goodsIntegral.images.split(',');
                });
                this.tableData = data.data;
                this.paging.total = data.total;
            }
        },
        reset() {
            //重置
            this.paging = this.$options.data().paging;
            this.handleCurrentChange(1, true);
        },
        handleSizeChange(val) {
            this.paging.limit = val;
            this.repairGetList();
        },
        handleCurrentChange(val, type) {
            if (type) this.$refs.table.clearSelection();
            this.paging.page = val;
            this.repairGetList();
        },
    },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
    width: 130px;
    height: 130px;
}
</style>
